<template>
    <div class="body">
        <!-- <div class="header">
            <span></span>
            <p>出库管理</p>
            <button class="el-icon-refresh">刷新</button>
        </div> -->

        <div class="search">
            <span class="el-icon-search">筛选查询</span>
            <button @click="search(form.outDepot,outTime[0],page,size,form.state,
            outTime[1]),form.vendor">查询结果</button>
        </div>

        <div class="search-input">
            <div class="block">
                <span class="demonstration">出库日期:</span>
                <el-date-picker
                v-model="outTime"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="date">
                </el-date-picker>
            </div>
                <el-form ref="form" :model="form" class="storehouse"  >
                    <el-form-item label="出库仓库:" class="form-item">
                        <el-select v-model="form.outDepot" class="form-input" style="width:130px">
                            <el-option
                                v-for="item in outDepot"
                                :key="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户名称:" class="form-item">
                        <el-select v-model="form.uName" class="form-input" style="width:130px">
                            <el-option
                            
                                v-for="item in uName"
                                :key="item"
                                :value="item">
                               
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态:" class="form-item">
                        <el-select v-model="form.state"  class="form-input">
                            <el-option label="待审批" value="0"></el-option>
                            <el-option label="已通过" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
        </div>
        <!-- 实体内容 -->
        <div class="content">
            <!-- 导航栏 -->
            <div>
                <span class="el-icon-s-operation data-list" >数据列表</span>
                <div class="right-menu">
                <button class="add" @click="add">添加</button>
                <button class="outport" @click="Export">导出</button>   
                <el-form ref="form" :model="form" class="showdetails" >
                    <el-form-item class="showlist" >
                        <el-select  class="form-input" v-model="form.count" 
                        placeholder="显示条数" @change="countChange">
                            <el-option label="5条" value="5"></el-option>
                            <el-option label="10条" value="10"></el-option>
                            <el-option label="20条" value="20"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="showlist">
                        <el-select  class="form-input" placeholder="排序方式" 
                        v-model="form.order" @change="orderChange(form.order)">
                            <el-option label="正序" value="sec"></el-option>
                            <el-option label="倒序" value="desc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
            <!-- 列表数据渲染 -->
            <div>
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="id"
                    label="编号"
                    width="120">
                    <template></template>
                    </el-table-column>
                    <el-table-column
                    prop="createDate"
                    label="创建日期"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="depot"
                    label="出库"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="oname"
                    label="业务员"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="amount"
                    label="总金额"
                    show-overflow-tooltip>
                    </el-table-column>
                        <el-table-column
                    prop="time"
                    label="出库时间"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="uname"
                    label="发起人"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="oname"
                    label="审批人"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="state"
                    label="状态"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="审批操作">
                    <template slot-scope="scope">
                        <el-button 
                        v-if="scope.row.state=='已通过'?false:true"
                        type="text" size="small"
                        @click="handlecheck(scope.row.id)">审批</el-button>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                    <template  slot-scope="scope" >
                        <el-button
                         v-if="scope.row.state=='已通过'?false:true"
                        type="text" size="small"
                        @click="handleEdit(scope.row.id,scope.row.aname,scope.row.payType,
                        scope.row.oname,scope.row.depot,scope.row.createDate,scope.row.state
                        ,scope.row.comments,scope.row.time,scope.row.uname)" 
                        >编辑</el-button>
                        <el-button
                        type="text" size="small"
                        @click="handleView(scope.row.id,scope.row.aname,scope.row.payType,
                        scope.row.oname,scope.row.depot,scope.row.createDate,scope.row.state
                        ,scope.row.comments)">预览</el-button>
                        <el-button
                        type="text" size="small"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div class="page-wrap">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalCount"
                    class="page"
                    :page-size="size"
                    @current-change="currentChange">
                    </el-pagination>
                </div>
            </div>       
            <!-- <OutList/> -->
            <!-- <div class="page-wrap">
                <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                class="page">
                </el-pagination>
            </div> -->
        </div>
    </div>
    
</template>


<script>
import {dataListApi,deleteListApi,searchDataListApi,orderApi,downApi,approveApi,exportApi} from '../../http/InventoryApi/OutApi'
import {fileExport} from '../../utilty/export'
export default { 
    name:'OutManagement',
    data() {
        return {
             searchState:'',
             outTime:'',
             form:{
                 outDepot:'',
                 uName:'',
                 state:'',
                 count:'',
                 order:'',
             },
             outDepot:[],
             uName:[],
            //  数据列表
             tableData:[],
             totalCount:null,
             page: 1,
             size: 5,
        }
    },
    created() {
        this.searchState = null
        this.getInit(this.page,this.size)
        this.downRender()
    },
    activated(){
        this.getInit(this.page,this.size)
    },
    updated() {
        // console.log("时间",this.outTime,this.form.count,this.form.outDepot)
        
        // this.getInit(this.page,this.size)

    },
    computed:{
        getState(){
            return (row)=>{
                console.log(row)
                return true
            }
        }
    },
    methods:{
        // 下拉框数据渲染
        downRender() {
            downApi()
             .then(res => {
                let data = res.data.data
                for(let i = 0;i<data.length;i++) {
                    this.outDepot.push(data[i].depot)
                    this.uName.push(data[i].uname)
                }
                this.outDepot = [...new Set(this.outDepot)]
                this.uName = [...new Set(this.uName)]
             })
             .catch(err => {
                console.log('下拉框数据渲染获取失败',err)
             })
        },
        // 显示条数更改,
        countChange() {
            this.size = this.form.count
            this.getInit(this.page,this.size)
        },
        // 排序方式改变
        orderChange(order) {
            orderApi(order)
            .then(res => {
                this.tableData=res.data.data
                console.log(res)
            })
            .catch((err) => {
                console.log("排序方式改变：", err);
            });
        },
        // 添加跳转
        add() {
            this.$router.push('/outmangement/addoutlist')
        },
        // 初始化表格
        getInit(page,size) {
            // 总数据获取
            // dataListCount()
            //  .then((res)=> {
            //    this.totalCount = res.data.data
            //  })
            //  .catch(err=> {
            //    console.log("获取数据总数出错",err)
            //  })
            //  根据页数数据渲染
            dataListApi(page,size) 
            .then(res => {
                // this.tableData=res.data.data
                this.totalCount = res.data.total

                this.tableData=[...res.data.data].map(item=> {
                    return {
                        ...item,
                        state:item.state==1?'已通过':'待审批'
                    }

                    // item.state=item.state==1?'已通过':'待审批'
                    // // this.$set(this.tableData,item.state,item.state==1?'已审批':'待审批')
                })
                console.log(res.data,'999')
                
            })
            .catch((err) => {
                console.log("获取分页出错：", err);
            });
        },
        // 条件搜索渲染数据列表(这个请求应该写成一个)
        search(depot,from,page,size,state,to) {
            // this.searchState = 1
            console.log('搜索')
            searchDataListApi(depot,from,page,size,state,to)
             .then((res) => {
                this.totalCount = res.data.total
                this.tableData=[...res.data.data].map(item=> {
                    return {
                        ...item,
                        state:item.state==1?'已通过':'待审批'
                    }
                    // item.state=item.state==1?'已通过':'待审批'
                    // // this.$set(this.tableData,item.state,item.state==1?'已审批':'待审批')
                })
                console.log('搜索',res)
             })
             .catch((err) => {
                console.log("获取搜索列表出错：", err);
            });
        },
        // 换页
        currentChange(page) {
            this.page = page;  
            this.getInit(page, this.size)  
        },
        // 编辑
        handleEdit(id,aname,payType,oname,depot,createDate,state,comments,time,uname) { 
            this.$router.push({path:'/outmangement/addoutlist',
            query:{id:id,aname:aname,payType:payType,oname:oname,depot:depot,
            createDate,state:state,comments:comments,time:time,uname:uname}})
        },
        // 预览
        handleView(id,aname,payType,oname,depot,createDate,state,comments) {
            this.$router.push({path:'/outmangement/inventoryviewout',
            query:{id:id,aname:aname,payType:payType,oname:oname,depot:depot,
            createDate,state:state,comments:comments}})
        },

        // 审批意见
        handlecheck(id) {
            this.$prompt('审批意见', '审批', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value}) => {
                approveApi(value,id)
                 .then(() => {
                     this.getInit(this.page,this.size)
                 })
                 .catch(err => {
                    console.log('审批意见传递失败',err)
                 })
                this.init
                this.$message({
                type: 'success',
                message: '你的审批意见是: ' + value
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '取消输入'
                });       
            });
        },
        // 删除
        handleDelete(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(id)
                deleteListApi(id)
                .then(()=>{
                    this.getInit(this.page,this.size)
                })
                .catch((err) => {
                console.log('删除失败：',err)
                })
                
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
        },

        // 导出
        Export() {
            console.log('123')
            exportApi()
             .then((res) => {
                console.log(res.data)
                fileExport(res.data,'库存')
                
             })
             .catch(err => {
                console.log('导出失败',err)
             })
        },
        handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
    
}
</script>


<style lang="scss" scoped>
@import "../../assets/sass/var.scss";
.body {

    width: 100%;
    .header {
    background-color: $background-color;
    color:$context-color;
    height: 50px;
    width:100%;
    line-height:50px ;
     span {
        width:5px;
        height:25px;
        background-color: $panel-color;
        float: left;
        margin: 12.5px 5px 12.5px 0;

     }
     p {
        size: 14px;
        float: left;

     }
     button {
        float: right;
        size: 12px;
        height: 30px;
        width: 80px;  
        background-color: white;
        border: solid 1px rgba(0, 0, 0, 0.817);
        margin: 10px 10px 10px 0;
        &:hover {
            background: $background-color;
        }
     } 

  }

    .search {
        margin-top:20px;
        background-color: $background-color;
        color:$context-color;
        height: 50px;
        // width: 90%;
        // margin:20px 5% 0;

        span{
            size: 14px;
            float: left;
            line-height: 50px;
            margin-left: 10px;
        };

        button {
            float: right;
            size: 12px;
            height: 30px;
            width: 80px;  
            background-color: white;
            border: solid 1px rgba(138, 137, 137, 0.475);
            margin: 10px 10px 10px 0;
            &:hover {
                background-color: rgb(220, 217, 217);
            }
        }
    }
    .search-input {
        color:$context-color;
        height: 60px;
        // min-width: 1200px;
        // width: 90%;
        // margin:0 5% ;
        line-height:60px;
        border:solid 1px rgb(225, 225, 225);
        box-sizing: border-box;
        padding:0 10px;
        .block {
            width: 25%;
            font-size: 14px;
            float: left;
            .date {
            width: 65%;
            }
        }
        .storehouse {
            width: 75%;
            float: left;
            margin:10px 0;
            height: 60px;
            margin:0;
            box-sizing: border-box;
            padding:10px 0;
            .form-item {
                min-width:33%;
                float: left;
                .form-input {
                    width: 50%;
                }
            }
        }
    }
    .content {
        margin-top:20px;
        background-color: $background-color;
        color:$context-color;
        // width: 90%;
        // margin:20px 5% 0;
        height: 50px;
        span {
            line-height: 50px;
            margin-left:10px;
        }
        .right-menu {
            float: right;
            height:50px;
            box-sizing: border-box;
            margin:0;
            padding:10px 0;

            .add {
                background: rgb(22,155,213);
                color: white;
                font-size: 12px;
                height: 30px;
                width: 80px;  
                border: solid 1px rgba(138, 137, 137, 0.475);
                &:hover {
                    background: $background-color;
                    color:black
                }
            }
            .outport {
                font-size: 12px;
                height: 30px;
                width: 80px;  
                background-color: white;
                border: solid 1px rgba(138, 137, 137, 0.475);
                margin-left: 10px;
                 &:hover {
                    background-color: rgb(220, 217, 217);
                 }
            }
            .showdetails {
                float: right;
                height: 50px;
                margin-top:-5px;
                .showlist {
                    float: left;
                    margin-left: 10px;
                    .form-input {
                        width:110px;
                        height: 30px;
                        input {
                            height: 30px;
                        }
                    }
                }
            }
        }
        .page-wrap {
            height: 50px;
            width: 100%;
            .page {
            float: right;
            height: 50px;
            box-sizing: border-box;
            padding-top:8px
        }
        }

    }
}

</style>